<template>
  <div>
    <div class="cards">
      <Card style="width: 520px" class="card-item">
        <Form ref="complaintForm" :model="complaintForm" label-position="left" :label-width="100">
          <FormItem label="投诉内容">
            <Input type="textarea" :rows="10" v-model="complaintForm.content"></Input>
          </FormItem>
        </Form>
        <Button @click="submit" type="primary">确认投诉</Button>
      </Card>
    </div>
  </div>
</template>
<script>
import { addComplaintsInfo } from '../api/index'
const userInfo = JSON.parse(localStorage.getItem('userInfo') || {})
export default {
  data() {
    return {
      orderArr: [],
      complaintForm: {
        content: ''
      }
    }
  },
  methods: {
    submit() {
      const { id } = userInfo
      const obj = Object.assign(this.complaintForm, {user_id: id, time: new Date()})
      addComplaintsInfo(obj).then(() => {
        this.$Message.success('投诉成功~')
        this.complaintForm.content = ''
      })
    }
  }
}
</script>

<style scoped lang="scss">
img {
  width: 200px;
}
.cards {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .card-item {
    position: relative;
    span {
      position: absolute;
      color: rgb(35, 35, 31);
      font-weight: bold;
      left: 20px;
    }
  }
  .sTime,
  .eTime {
    display: flex;
  }
}
.btns {
  display: flex;
  justify-content: flex-end;
  button {
    margin: 0 5px;
    margin-top: 10px;
  }
}
</style>
